<template>
    <div class="button-wrapper">
        <text @touchstart="toStart" @touchend="tEnd" @click="emitClick" class="word" :class="[ifPress ? 'afterPress' : 'beforePress']">{{word}}</text>
    </div>
</template>

<script>
export default {
  name: 'button',
  props: ['word'],
  data () {
    return {
      ifPress: false
    }
  },
  methods: {
    toStart (e) {
      this.ifPress = true
    },
    tEnd (e) {
      this.ifPress = false
    },
    emitClick () {
      this.$emit('doclick')
    }
  }
}
</script>

<style scoped>
    .button-wrapper {
        flex-direction: row;
        justify-content: center;
    }
    .word {
        width: 414px;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        font-family: regular;
        text-align: center;
        border-radius: 10px;
    }
    .beforePress {
        color: #fff;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }
    .afterPress {
        color: #c4c4c4;
        background-image: linear-gradient(to right, #343741, #8e929d);
    }
</style>
